<html>
	<head>
		<meta
		  name="viewport"
		  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover"
		/>
		<meta name="referrer" content="no-referrer">
		<script type="text/javascript" src="js/hls.min.js"></script>
		<script type="text/javascript" src="js/flv.min.js"></script>
		<script type="text/javascript" src="js/three.min.js"></script>
		<script type="text/javascript" src="js/OrbitControls.js"></script>
		<script type="text/javascript" src="js/DeviceOrientationControls.js"></script>
		<script type="text/javascript" src="js/yb-player-gesture.js"></script>
		<script type="text/javascript" src="js/yb-player-subtitle.js"></script>
		<script type="text/javascript" src="js/yb-player-danmu.js"></script>
		<script type="text/javascript" src="js/yb-player-pano.js"></script>
		<script type="text/javascript" src="js/yb-player.js"></script>
		
		<script type="text/javascript" src="js/common-slots.js"></script>
		
		<link rel="stylesheet" type="text/css" href="css/yb-player.css"/>
		<link rel="stylesheet" type="text/css" href="css/yb-player-plugin.css"/>
		
		<link rel="stylesheet" href="css/common-slots.css" />
		<title>全局播放器</title>
		<style>
			html, body {
				padding: 0;
				margin: 0;
				background-color: #000;
				width: 100vw;
				height: 100vh;
			}
			.my-player {
				width: 100%;
				height: 100%;
			}
			.loading {
				position: fixed;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: #fff;
			}
			.close {
				position: fixed;
				top: 5%;
				left: 5%;
			}
			.close svg {
				width: 20px;
				height: 20px;
				fill: #fff;
			}
			.header_close svg {
				width: 20px;
				height: 20px;
				fill: #fff;
			}
		</style>
	</head>
	<body>
		<!-- Specify the player container -->
		<div id="my-player" class="my-player">
		</div>
		<!-- 考虑到APP端加载视频数据可能会很久，第一次显示视频需要先显示等待提示 -->
		<div class="loading">正在加载数据...</div>
		<div class="close" onclick="destroy()">
			<svg viewBox="0 0 1024 1024"><path d="M783.453091 140.101818l-315.578182 315.578182-315.578182-315.578182a41.053091 41.053091 0 0 0-28.113454-11.264 37.888 37.888 0 0 0-27.554909 11.915637 37.608727 37.608727 0 0 0-11.915637 27.554909c0 10.426182 3.723636 19.828364 11.264 28.206545l315.578182 315.578182L95.883636 827.578182a38.446545 38.446545 0 0 0-10.612363 38.818909c3.723636 15.080727 12.939636 24.389818 27.554909 28.206545 14.615273 3.723636 27.741091 0.186182 39.377454-10.705454l315.578182-315.578182 315.578182 315.578182c8.378182 7.447273 17.687273 11.264 28.113455 11.264 10.426182 0 19.642182-4.002909 27.554909-11.915637a37.608727 37.608727 0 0 0 11.915636-27.554909 41.239273 41.239273 0 0 0-11.170909-28.206545L524.194909 512l315.578182-315.485091a38.446545 38.446545 0 0 0 10.612364-38.818909 36.119273 36.119273 0 0 0-28.206546-28.206545 38.446545 38.446545 0 0 0-38.818909 10.705454z"></path></svg>
		</div>
		<script>
			var mp, fullscreen, params
			function setVideo (arg) {
				//开始加载视频后可以关闭等待提示
				document.getElementsByClassName('loading')[0].style.display = 'none'
				document.getElementsByClassName('close')[0].style.display = 'none'
				params = JSON.parse(decodeURIComponent(arg))
				var src = params.src
				var poster = params.poster
				var type = params.type
				var three = params.three
				var title = params.title
				var isLive = params.isLive
				var autoplay = params.autoplay
				var barrages = params.barrages
				var initialVolume = params.initialVolume
				var initialLight = params.initialLight
				var works = params.works
				var workIndex = params.workIndex
				if ( mp ) {
					mp.off('ended')
					mp.off('loadeddata')
					mp.off('fullscreenchange')
					mp.unloadDanmu()
					mp.unloadGestureEvent()
					mp.unloadVideo()
					mp.unload()
				}
				mp = new YbPlayer({
					container:'#my-player',
					src,
					title,
					poster,
					type,
					three,
					autoplay,
					loop: false,
					header: true,
					controls: true,
					isLive,
					exitDirection: 'portrait',
					height: '100%',
					danmu: barrages,
					works,
					workIndex,
					custom: {
						gesture: {
							initialVolume,
							initialLight
						},
						progress: {
							rightSlots: [danmuSlot]
						},
						header: getHeaderConfig(fullscreen),
						danmu: {
							fontScale: 0.7,
							fontSize: 25,
							filter: params.danmufilter
						}
					},
					decoder: {
						hls: {
							loader: Hls
						},
						flv: {
							loader: flvjs
						}
					}
				})
				mp.load()
				mp.loadVideo()
				mp.loadGestureEvent(true)
				if ( barrages && barrages.length > 0 ) mp.loadDanmu()
				mp.on('ended', function () {
					var href = window.location.href.split('?')[0]
					var search = window.location.href.split('?')[1]
					if ( search && search.startsWith('next=1') ) window.location.href = href + '?next=2'
					else window.location.href = href + '?next=1'
				})
				mp.on('workchange', function (e) {
					var href = window.location.href.split('?')[0]
					window.location.href = href + '?workChange=' + e.index
				})
				mp.on('seeklight', function (e) {
					var href = window.location.href.split('?')[0]
					window.location.href = href + '?seekLight=' + e
				})
				mp.on('seekvolume', function (e) {
					var href = window.location.href.split('?')[0]
					window.location.href = href + '?seekVolume=' + e
				})
				mp.on('danmufilteradd', function (e) {
					var href = window.location.href.split('?')[0]
					window.location.href = href + '?danmufilteradd=' + encodeURIComponent(JSON.stringify(e.detail))
				})
				mp.on('danmufilterreduce', function (e) {
					var href = window.location.href.split('?')[0]
					window.location.href = href + '?danmufilterreduce=' + encodeURIComponent(JSON.stringify(e.detail))
				})
				mp.on('fullscreenchange', function () {
					fullscreen = mp.getFullscreen()
					mp.setCustom('header', getHeaderConfig(mp.getFullscreen()))
					mp.unloadCustom()
					mp.loadCustom()
				})
			}
			
			function getHeaderConfig (fullscreen) {
				return fullscreen ? {
					enableThree: true,
					disableBack: false
				} : {
					enableThree: true,
					disableBack: true,
					leftSlots: [{
						innerHTML: `
							<div class="header_close">
								<svg viewBox="0 0 1024 1024"><path d="M783.453091 140.101818l-315.578182 315.578182-315.578182-315.578182a41.053091 41.053091 0 0 0-28.113454-11.264 37.888 37.888 0 0 0-27.554909 11.915637 37.608727 37.608727 0 0 0-11.915637 27.554909c0 10.426182 3.723636 19.828364 11.264 28.206545l315.578182 315.578182L95.883636 827.578182a38.446545 38.446545 0 0 0-10.612363 38.818909c3.723636 15.080727 12.939636 24.389818 27.554909 28.206545 14.615273 3.723636 27.741091 0.186182 39.377454-10.705454l315.578182-315.578182 315.578182 315.578182c8.378182 7.447273 17.687273 11.264 28.113455 11.264 10.426182 0 19.642182-4.002909 27.554909-11.915637a37.608727 37.608727 0 0 0 11.915636-27.554909 41.239273 41.239273 0 0 0-11.170909-28.206545L524.194909 512l315.578182-315.485091a38.446545 38.446545 0 0 0 10.612364-38.818909 36.119273 36.119273 0 0 0-28.206546-28.206545 38.446545 38.446545 0 0 0-38.818909 10.705454z"></path></svg>
							</div>
						`,
						click: function () {
							destroy()
						}
					}],
					more: [{
						text: '下载视频',
						click: function () {
							if ( mp && !mp.video ) {
								mp.showToast('播放地址为空')
								return
							}
							if ( mp && mp.getFullscreen() ) {
								mp.showToast('请退出全屏后再下载')
								return
							}
							var href = window.location.href.split('?')[0]
							var newHref = href + '?src=' + encodeURIComponent(params.src) + '&title=' + encodeURIComponent(params.title)
							var search = window.location.href.split('?')[1]
							if ( search && search.startsWith('startDownload=1') ) window.location.href = newHref + '&startDownload=2'
							else window.location.href = newHref + '&startDownload=1'
						}
					}],
					rightSlots: [{
						innerHTML: `
							<div class="yb-player-icon yb-player-unfull">分P</div>
						`,
						click: function () {
							var href = window.location.href.split('?')[0]
							var search = window.location.href.split('?')[1]
							if ( search && search.startsWith('work=1') ) window.location.href = href + '?work=2'
							else window.location.href = href + '?work=1'
						}
					}]
				}
			}
			
			function destroy () {
				var href = window.location.href
				window.location.href = href + '?back=1'
			}
			
			function decimalToRgb (decimal) {
				var r = (decimal >> 16) & 255;
				var g = (decimal >> 8) & 255;
				var b = decimal & 255;
				return 'rgb(' + r + ',' + g + ',' + b + ')'
			}
			
		</script>
	</body>
</html>